<template>
  <div class="app-container">
    <!-- 显示单色色卡 -->
    <div class="color-palette">
      <div
        v-for="(color, index) in colorAll"
        :key="'color-' + index"
        class="color-swatch"
        :style="{ backgroundColor: color }"
      >
        {{ color }}
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'ColorPalette',
  data() {
    return {
      colorAll: [
        '#5470c6',
        '#91cc75',
        '#fac858',
        '#ee6666',
        '#73c0de',
        '#3ba272',
        '#fc8452',
        '#9a60b4',
        '#ea7ccc'
      ]
      // ant design
      // https://4x-ant-design.antgroup.com/docs/spec/colors-cn
    }
  }
}
</script>

<style>
.color-palette,
.color-layer-palette {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.color-swatch {
  margin: 5px;
  width: 80px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
  font-size: 12px;
}
</style>
